<template>
  <div class="addBox" style="height: 100%">
    <el-row class="handle-box">
      <el-col :span="20">
        <span>{{ $t("templatecon.templatename") }}：</span>
        <el-input
          v-model="param.ModelName"
          :placeholder="$t('public.text')"
          clearable
        ></el-input>

        <span>{{ $t("welllist.welltype") }}：</span>
        <el-select
          v-model="param.Specialty"
          filterable
          clearable
          :placeholder="$t('public.select')"
        >
          <el-option
            v-for="item in welltypedata"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          >
          </el-option>
        </el-select>

        <span>{{ $t("blockcon.areaname") }}：</span>
        <el-select
          v-model="param.Areas"
          filterable
          clearable
          :placeholder="$t('public.select')"
        >
          <el-option
            v-for="item in area"
            :key="item.areaId"
            :label="item.areaName"
            :value="item.areaName"
            clearable
          >
          </el-option>
        </el-select>

        <span>{{ $t("templatecon.templatetype") }}：</span>
        <el-select
          v-model="param.ModelType"
          filterable
          clearable
          :placeholder="$t('public.select')"
        >
          <el-option
            v-for="item in templatetypedata"
            :key="item.value"
            :label="item.label"
            :value="item.label"
            clearable
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="7" style="text-align: right">
        <el-button
          style="width: 80px"
          size="small"
          type="warning"
          @click="cancel"
          >{{ $t("public.cancelbtn") }}</el-button
        >
        <el-button
          style="width: 80px; margin-left: 0px"
          size="small"
          v-if="param.btnShow"
          type="primary"
          @click="update"
          >{{ $t("public.save") }}</el-button
        >
        <el-button
          style="margin-left: 0px"
          size="small"
          v-if="param.btnShow"
          type="primary"
          @click="newadd"
          >{{ $t("templatecon.saveAs") }}</el-button
        >

        <el-button
          style="width: 80px; margin-left: 0px"
          size="small"
          v-else
          type="primary"
          @click="save"
          >{{ $t("public.save") }}</el-button
        >
      </el-col>
    </el-row>
    <el-row class="main" style="height: calc(100% - 80px)">
      <el-col :span="20" class="mainLeft box" id="graph"> </el-col>

      <el-col :span="4" class="mainRight box">
        <div class="control">
          <div class="widget-cate">{{ $t("templatecon.controltype") }}</div>
          <ul class="left-drag">
            <li
              :class="layuiClass"
              v-for="(item, index) in control"
              :key="index"
              @click="layuiShow(item.value)"
            >
              <i :class="item.icon"></i>
              <span v-text="item.txt"></span>
            </li>
            <li class="unli"></li>
            <li class="unli"></li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from "../../../../static/layui/vuepublic";
export default {
  inject: ["reload"],
  props: ["param", "models","area"],
  data() {
    return {
      layuiClass: "", //layui-this
      //井类型数据
      welltypedata: [
        {
          value: "1",
          label: "录井",
        },
      ],
      //模板类型数据
      templatetypedata: [
        {
          value: "1",
          label: "钻井工程",
        },
        {
          value: "2",
          label: "综合录井",
        },
        {
          value: "3",
          label: "随钻跟踪",
        },
        {
          value: "4",
          label: "完井测试",
        },
        {
          value: "5",
          label: "自定义模板",
        },
      ],
      control: [
        {
          txt: "深度控件",
          value: "depthview",
          icon: "el-icon-eleme",
        },
        {
          txt: "时间控件",
          value: "timeview",
          icon: "el-icon-eleme",
        },
        {
          txt: "Top控件",
          value: "topview",
          icon: "el-icon-eleme",
        },
        {
          txt: "Side控件",
          value: "sideview",
          icon: "el-icon-eleme",
        },
        {
          txt: "Dls控件",
          value: "dlsview",
          icon: "el-icon-eleme",
        },
        {
          txt: "3D控件",
          value: "threeview",
          icon: "el-icon-eleme",
        },
        {
          txt: "数据控件",
          value: "dataview",
          icon: "el-icon-eleme",
        },
        {
          txt: "工具面",
          value: "toolface",
          icon: "el-icon-eleme",
        },
        {
          txt: "曲线表头",
          value: "curvehead",
          icon: "el-icon-eleme",
        },
        {
          txt: "E柱状图(横)",
          value: "crosswiseview",
          icon: "el-icon-eleme",
        },
        {
          txt: "E柱状图(竖)",
          value: "columnarview",
          icon: "el-icon-eleme",
        },
        {
          txt: "E折线图",
          value: "lineview",
          icon: "el-icon-eleme",
        },
        {
          txt: "数值控件",
          value: "numericalview",
          icon: "el-icon-eleme",
        },
      ],
    };
  },
  mounted() {
    layui.use(["form", "colorpicker", "layer", "table"], () => {
      var form = layui.form;
      var layer = layui.layer;
      var table = layui.table;
      window.graph.layer = layer;
      window.graph.form = form;
      window.SChart.tables = table;
    });

    window.graph.PortSet(api.api_address);
    window.graph.modelreset();
  },
  methods: {
    cancel() {
      this.reload();
      this.$emit("cancel", true);
    },
    //添加保存
    save() {
      //(备注：区域对应 1.(渤海)天津  2.(东海)上海  3.(南海东部)深圳  4.(南海西部)湛江)
      if (this.param.Areas == "") {
        this.$message({
          showClose: true,
          type: "warning",
          message: "请选区域",
        });
        return false;
      }
      if (this.param.ModelName == "") {
        this.$message({
          showClose: true,
          type: "warning",
          message: "请输入模板名称",
        });
        return false;
      }
      if (this.param.Specialty == "") {
        this.$message({
          showClose: true,
          type: "warning",
          message: "请选择井别",
        });
        return false;
      }
      if (this.param.ModelType == "") {
        this.$message({
          showClose: true,
          type: "warning",
          message: "请选择模板类型",
        });
        return false;
      }

      let save = {
        Areas: this.param.Areas,
        ModelName: this.param.ModelName,
        UserId: JSON.parse(this.$store.state.userInfo).uid,
        Specialty: this.param.Specialty,
        ModelType: this.param.ModelType,
        Image: "SideView.gif",
      };
      var res = JSON.parse(window.graph.SaveTemplate("/dl/adds", "", save));
      if (res.code == 200) {
        this.$message({
          showClose: true,
          type: "success",
          message: res.msg,
        });
        this.reload();
        this.$emit("cancel", true);
      } else {
        this.$message({
          showClose: true,
          type: "success",
          message: "请添加模板控件",
        });
      }
    },
    //修改保存
    update() {
      //(备注：区域对应 1.(渤海)天津  2.(东海)上海  3.(南海东部)深圳  4.(南海西部)湛江)
      if (this.param.Areas == "") {
        this.$message({
          showClose: true,
          type: "warning",
          message: "请选区域",
        });
        return false;
      }
      if (this.param.ModelName == "") {
        this.$message({
          showClose: true,
          type: "warning",
          message: "请输入模板名称",
        });
        return false;
      }
      if (this.param.Specialty == "") {
        this.$message({
          showClose: true,
          type: "warning",
          message: "请选择井类型",
        });
        return false;
      }
      if (this.param.ModelType == "") {
        this.$message({
          showClose: true,
          type: "warning",
          message: "请选择模板类型",
        });
        return false;
      }

      let save = {
        Areas: this.param.Areas,
        ModelName: this.param.ModelName,
        UserId: JSON.parse(this.$store.state.userInfo).uid,
        Specialty: this.param.Specialty,
        ModelType: this.param.ModelType,
        Image: "SideView.gif",
      };
      var res = JSON.parse(window.graph.SaveTemplate("/dl/saves", "", save));
      if (res.code == 200) {
        this.$message({
          showClose: true,
          type: "success",
          message: res.msg,
        });
        this.reload();
        this.$emit("cancel", true);
      } else {
        this.$message({
          showClose: true,
          type: "success",
          message: "请添加模板控件",
        });
      }
    },
    //另存为新模板
    newadd() {
     //(备注：区域对应 1.(渤海)天津  2.(东海)上海  3.(南海东部)深圳  4.(南海西部)湛江)
      if (this.param.Areas == "") {
        this.$message({
          showClose: true,
          type: "warning",
          message: "请选区域",
        });
        return false;
      }
      if (this.param.ModelName == "") {
        this.$message({
          showClose: true,
          type: "warning",
          message: "请输入模板名称",
        });
        return false;
      }
      if (this.param.ModelName == this.models) {
        this.$message({
          showClose: true,
          type: "warning",
          message: "模板名称重复，请修改",
        });
        return false;
      }
      if (this.param.Specialty == "") {
        this.$message({
          showClose: true,
          type: "warning",
          message: "请选择井类型",
        });
        return false;
      }
      if (this.param.ModelType == "") {
        this.$message({
          showClose: true,
          type: "warning",
          message: "请选择模板类型",
        });
        return false;
      }

      let save = {
        Areas: this.param.Areas,
        ModelName: this.param.ModelName,
        UserId: JSON.parse(this.$store.state.userInfo).uid,
        Specialty: this.param.Specialty,
        ModelType: this.param.ModelType,
        Image: "SideView.gif",
      };
      var res = JSON.parse(window.graph.SaveTemplate("/dl/adds", "", save));
      if (res.code == 200) {
        this.$message({
          showClose: true,
          type: "success",
          message: res.msg,
        });
        this.reload();
        this.$emit("cancel", true);
      } else {
        this.$message({
          showClose: true,
          type: "success",
          message: "请添加模板控件",
        });
      }
    },
    //layui效果
    layuiShow(value) {
      layui.use(["form", "colorpicker", "layer", "table"], () => {
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        window.graph.layer = layer;
        window.graph.form = form;
        window.SChart.tables = table;

        window.graph.modelList(value);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.addBox .main {
  height: 830px;
  display: flex;
  justify-content: space-between;
}
.addBox .box {
  background-color: #172a4d;
}
.addBox .mainLeft {
  position: relative;
  margin-right: 15px;
  border-radius: 4px;
}
.addBox .mainRight {
  border-radius: 4px;
}
.addBox .control {
  height: 206px;
  margin: 5px;
  border-radius: 4px;
  background-color: #213a69;

  .widget-cate {
    padding: 8px 12px;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 14px;
  }

  .left-drag {
    overflow: hidden;
    padding: 0 10px 10px;
    margin: 0;
    display: flex;
    justify-content: space-around;
    flex-flow: wrap;
    .unli {
      visibility: hidden;
      background: none;
      border-color: #213a69;
    }
    > li {
      background-color: #f4f6fd;
      border: 1px solid #f4f6fd;
      color: black;
      text-align: center;
      width: 30%;
      margin: 1% 0;
      line-height: 26px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      font-size: 12px;
      letter-spacing: 0;
    }
    li:hover {
      border: 1px dashed rgb(90, 90, 226);
    }
  }
}
</style>